<script>
    function deleteBlob(blobId) {
         $("#DeleteConfirmationDialog" + blobId).dialog(
            {
                resizable: false, height: 250, width: 300,
                buttons: {
                    'OK': function() {
                        document.forms['deleteBlobForm'+blobId].submit();
                    },
                    'Cancel': function() {
                        $(this).dialog("close");
                    }
                  }
            }
         );
    }
</script>
<section class="mainSection">
    <h1 class="pageTitle">Blobs Available</h1>
    <% if (serverBlobs.length > 0) { %>
        <ul>
            <% for (var i = 0; i < serverBlobs.length; i++) { %>
                <li class="blobItem">
                    <%= serverBlobs[i].name %>
                    <a class="downloadBlob" href="/Download/<%= serverBlobs[i].name %>"></a>
                    <a class="deleteBlob" href="javascript:deleteBlob(<%= i %>)"></a>
                    <form id="deleteBlobForm<%= i %>" action="/Delete/<%= serverBlobs[i].name %>" method="post">
                    </form>
                    <div id="DeleteConfirmationDialog<%= i %>" class="jquery-dialog" title="Delete Blob">
                        <span class="ui-icon ui-icon-alert ui-icon-float"></span>
                        <p>Are you sure you want to delete <%= serverBlobs[i].name %>?</p>
                    </div>
                </li>
            <% } %>
        </ul>
    <% } else { %>
        Nothing to see here. <a href="./Upload">Click to upload<a/>.
    <% } %>
</section>
